<template>
    <quill-editor class="editor" 
        v-model="content" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" 
        @focus="onEditorFocus($event)" 
        @change="onEditorChange($event)"
        @input="click()">
    </quill-editor>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import hljs from 'highlight.js'

// import 'highlight.js/styles/dracula.css'

// import 'quill/dist/quill.core.css'
// import 'quill/dist/quill.snow.css'
// import 'quill/dist/quill.bubble.css'
// import { ImageDrop } from 'quill-image-drop-module'
// Quill.register('modules/imageDrop', ImageDrop);
import { ImageExtend, QuillWatch } from 'quill-image-extend-module'
import imageResize from 'quill-image-resize-module'
Quill.register('modules/ImageExtend', ImageExtend)
Quill.register('modules/imageResize', imageResize)

var toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],    //加粗，斜体，下划线，删除线
        ['blockquote', 'code-block'],     //引用，代码块


        [{'header': 1}, {'header': 2}],        // 标题，键值对的形式；1、2表示字体大小
        [{'list': 'ordered'}, {'list': 'bullet'}],     //列表
        [{'script': 'sub'}, {'script': 'super'}],   // 上下标
        [{'indent': '-1'}, {'indent': '+1'}],     // 缩进
        [{'direction': 'rtl'}],             // 文本方向


        [{'size': ['small', false, 'large', 'huge']}], // 字体大小
        [{'header': [1, 2, 3, 4, 5, 6, false]}],     //几级标题


        [{'color': []}, {'background': []}],     // 字体颜色，字体背景颜色
        [{'font': []}],     //字体
        [{'align': []}],    //对齐方式


        ['clean'],    //清除字体样式
        ['link','image', 'video']    //上传图片、上传视频
]
export default {
//    name: 'editor',
   data() {
      return {
        // accessToken: {},
        // uploadFileUrl: uploadFile,
        // loading: false,

        content:null,
        editorOption:{
                // 富文本编辑器配置，顶部的工具栏
                modules: {

                // ImageExtend: {
                //         loading: true,
                //         name: 'file',
                //         action: uploadFile,
                //         headers: (xhr) => {
                //                 xhr.setRequestHeader("accessToken",this.getStore("accessToken"))
                //         },
                //         response: (res) => {
                //                 return res.result
                //         }
                // },

                toolbar:"#toolbar",
                toolbar: {
                        container: toolbarOptions,  // 工具栏

                        // handlers: {
                        //         'image': function (value) {
                        //             if (value) {
                        //                 alert('自定义图片')
                        //                 // document.querySelector('.ivu-upload .ivu-btn').click()
                        //                 QuillWatch.emit(this.quill.id)
                        //             } else {
                        //                 this.quill.format('image', false);
                        //             }
                        //         }
                        // }
                },
                // imageResize: {},
                syntax: {
                        highlight: text => {
                        return hljs.highlightAuto(text).value; // 这里就是代码高亮需要配置的地方
                },
                }

                },
                theme: "snow",//主题
                placeholder: "写一些有趣的东西吧..."
        },
        }
    },

    computed: {
        editor() {
                return this.$refs.myQuillEditor.quill;
        },
    },

//     created () {
//         this.editorOption.modules.syntax = {
//           highlight: text => hljs.highlightAuto(text).value
//         }

//         // hljs.configure({
// 	// 	languages: ['javascript', 'java', 'python']
// 	// });
// 	// document.addEventListener('DOMContentLoaded', (event) => {
//         //         document.querySelectorAll('pre').forEach((block) => {
//         //                 hljs.highlightBlock(block);
//         //         });
//         // });
//     },
    
    methods:{
        // init() {
        //         this.accessToken = {
        //             accessToken: this.getStore("accessToken")
        //         };
        //         console.log("---------------------------------")
        //         console.log(this.accessToken)
        //         /*let v = JSON.parse(Cookies.get("userInfo"));
        //         // 转换null为""
        //         for (let attr in v) {
        //             if (v[attr] == null) {
        //                 v[attr] = "";
        //             }
        //         }*/
        // },
        // handleSuccess(res) {
        //         // 获取富文本组件实例
        //         let quill = this.$refs.myQuillEditor.quill
        //         // 如果上传成功
        //         if (res.success == true) {
        //                 // 获取光标所在位置
        //                 let length = quill.getSelection().index;
        //                 // 插入图片，res为服务器返回的图片链接地址
        //                 quill.insertEmbed(length, 'image', res.result)
        //                 // 调整光标到最后
        //                 quill.setSelection(length + 1)
        //         } else {
        //                 // 提示信息，需引入Message
        //                 Message.error('图片插入失败')
        //         }
        // },

        onEditorBlur(){
        },
        onEditorFocus(){//获得焦点事件
        },
        onEditorReady() {
        },
        onEditorChange(){//内容改变事件
        },

        click () {
        //   var val = this.$refs.myQuillEditor
        //   this.content = this.escapeStringHTML(this.content)

        //   this.content = this.getSimpleText(this.content)

          this.$emit("push",this.content)
          console.log(this.content)
        },
    },

//     mounted() {
//         this.init();
//     }
}
</script>
 
<style lang="stylus" scoped>
.editor
  height 32.35rem
</style>